<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">请假审批</block>
		</cu-custom>
		<view class="menu-container">
			<view class="menu-item" v-for="(menu, i) in menus" :key="i">
				<view :class="'iconfont menu-icon '+ menu.icon" :style="{'color':menu.color}">
				</view>
				<text>{{menu.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: (o) => {
			console.log('onLoad')
		},
		data() {
			return {
				menus: [{
						name: '请假申请',
						id: '0101',
						color: '#38B0DE',
						icon: "icon-gonggao",
						path: 'oa_manage/notice/notice',
						badge: 100,
						isShowNum: true,
					},
					{
						name: '请假审批',
						id: '0102',
						color: '#6495ED',
						icon: "icon-tongxunlu",
						path: 'oa_manage/contacts/contacts',
						badge: 5,
						isShowNum: false,
					},
					{
						name: '我的申请',
						id: '0103',
						color: '#FF7F50',
						icon: "icon-shenqingshenpi",
						path: 'oa_manage/apply_approval/apply_approval',
						badge: 20,
						isShowNum: true,
					},
				],

			}
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current

			},
		}
	}
</script>

<style scoped>
	/*选择iconfont.css所在的路径*/
	@import '../../../../static/iconfont/iconfont.css';

	.head-container {
		display: flex;
		height: 150px;
		align-items: center;
		background-color: #0081ff;
		/* background-image: linear-gradient(45deg, #0081ff, #1cbbb4); */
	}

	.head-img-view {
		align-items: center;
		margin: 10px;
		display: flex;
		flex-direction: row;
	}

	.menu-container {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		flex-direction: row;
		/* background-color: #FFFFFF; */
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: calc(50% - 2px);
		height: 100px;
		font-size: 15px;
		color: #888888;
		margin-right: 2px;
		margin-bottom: 2px;
		background-color: #FFFFFF;
	}

	.menu-item:active {
		background-color: #f9f9f9;
	}

	.menu-icon {
		position: relative;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24px;
		/* height: 90px;
			width: 90px; */
		/* margin-top: -2px; */
		margin-bottom: -5px;
	}
</style>
